<template>
	<view class="mycollect">
		<view class="tabbox flex">
			<!-- 切换的时候下方小箭头没变 -->
			<view class="tabitem" @click="shaixuan(1)">
				<text>共享订单</text>
				<view class="active" v-show="type === 1"></view>
			</view>
			<view class="tabitem blue" @click="shaixuan(2)">
				<text>售卖订单</text>
				<view class="active blue" v-show="type === 2"></view>
			</view>
		</view>

    <!-- 共享 -->
      <view class="tabmain" v-show="isActive === 1">
        <view v-if="goodslist.length==0" class="shoproempty">
          <shopro-empty :image="mediaUrl + '/media/image/empty_goods.png'" tipText="暂无~"></shopro-empty>
        </view>
        <view v-else class="productbox flex" v-for="(item, index) in goodslist" :key="index" @click="goodsClick(item)">
          <image class="image" mode="scaleToFill" :src="item.image"></image>
          <view class="product-info">
            <view class="titles">{{item.goodsname}}</view>
            <!-- <view class="taglist" v-if="item.type==1">
              <view class="tag">免押金</view>
              <view class="tag">共享商品</view>
            </view>
            <view class="taglist" v-else>
              <view class="tag">免押金</view>
              <view class="tag">售卖商品</view>
            </view> -->
            <!-- <view class="tips">{{item.goodsdetail}}</view> -->
            <view class="distance">
              <image class="icon-location" src="@/static/images/home/icon_location.png" mode=""></image>
              <text>{{item.juli}}km</text>
            </view>
          </view>
          <view class="product-value">
            <view><text>{{item.money}}</text>{{item.type==1?'金币':'元'}}</view>
          </view>
        </view>
    </view>
    <!-- 售卖 -->
      <view class="tabmain" v-show="isActive === 2">
        <view v-if="goodslist.length==0" class="shoproempty">
          <shopro-empty :image="mediaUrl + '/media/image/empty_goods.png'" tipText="暂无~"></shopro-empty>
        </view>
        <view v-else class="productbox flex" v-for="(item, index) in goodslist" :key="index" @click="goodsClick(item)">
          <image class="image" mode="scaleToFill" :src="item.image"></image>
          <view class="product-info">
            <view class="titles">{{formatProductName(item.goodsname)}}</view>
            <!-- <view class="taglist" v-if="item.type==1">
              <view class="tag">免押金</view>
              <view class="tag">共享商品</view>
            </view>
            <view class="taglist" v-else>
              <view class="tag">免押金</view>
              <view class="tag">售卖商品</view>
            </view> -->
            <view class="tips">{{item.goodsdetail}}</view>
            <view class="distance">
              <image class="icon-location" src="@/static/images/home/icon_location.png" mode=""></image>
              <text>{{item.juli}}km</text>
            </view>
          </view>
          <view class="product-value">
            <view><text>{{item.money}}</text>{{item.type==1?'金币':'元'}}</view>
          </view>
        </view>
      </view>

		<MyLogin v-if="showlogin" :showlogin.sync="showlogin"></MyLogin>

	</view>
</template>

<script>
	import MyLogin from '@/components/my-login.vue'
  import {formatProductName} from "../../utils/common";

	export default {
		name: "mycollect",
		components: {
			MyLogin
		},
		data() {
			return {
				showlogin: false,
				goodslist: [],
				type: 1,
				userid: '',
				mediaUrl: uni.$http.mediaUrl,
				goodsbg: '/media/image/null.png',
				isActive: 1, // 1共享 2售卖
			}
		},
		onLoad() {
			this.userid = uni.getStorageSync('userid')
			
			this.getGoodsList()
			
			
		},
		onShow() {

		},
		methods: {
      formatProductName,
			goodsClick(item) {
			  if (uni.getStorageSync('hasLogin')) {
			    uni.navigateTo({
			      url: '/pages/home/goodsdetail?goodsid=' + item.goodsid
			    })
			  } else {
			    uni.showToast({
			      icon: 'none',
			      title: '登陆后可体验更多功能~',
			      duration: 2000
			    })
			    setTimeout(() => {
			      this.showlogin = true
			    }, 1000);
			  }

			},

			shaixuan(type) {
				this.type=type
				this.getGoodsList()
			},
			async getGoodsList() {
				this.goodslist = []
				
				const postmsg = {
					userid: this.userid,
					type: this.type,
				}
				// console.log(postmsg)

				const {
					data: res
				} = await uni.$http.post('getshou/', postmsg)
				if (res.code == 200) {
					// setTimeout(function() {
						if (res.data.length > 0) {
							var dest = [];
							for (let i = 0; i < res.data.length; i++) {
								var obj = {}
								obj.id = res.data[i].id;
								obj.goodsid = res.data[i].goodsid
								obj.goodsname = res.data[i].goodsname
								obj.goodsdetail = res.data[i].goodsdetail
								obj.imagelist = JSON.parse(res.data[i].imagelist);
								obj.image = obj.imagelist[0]
								obj.date = res.data[i].date
								obj.juli = res.data[i].juli;
								obj.money = res.data[i].money;
								obj.type = res.data[i].type;
								this.goodslist.push(obj)
							}
							// self.goodslist = self.goodslist.concat(goodslist1)

						}
					// }, 300);


				} else {
					// uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '系统繁忙中，请稍后再试...',
						duration: 1000
					})
				}
			},

		}
	}
</script>

<style lang="scss">
  .shoproempty {
    // background-color: #ff0000;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
	.image {
	  width: 100%;
	  border-top-left-radius: 32rpx;
	  border-top-right-radius: 32rpx;
	}
	.mycollect {
		padding: 30rpx;

		.tabbox {
			.tabitem {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				position: relative;
				color: white;
				border-radius: 8rpx 0px 0px 8rpx;
				background: rgb(197, 183, 242);

				&.blue {
					border-radius: 0px 8rpx 8rpx 0px;
					background: rgb(113, 161, 255);
				}

				.active {
					position: absolute;
					left: 50%;
					transform: translate(-50%, -2rpx);
					width: 0;
					height: 0;
					border-left: 15rpx solid transparent;
					border-right: 15rpx solid transparent;
					border-top: 30rpx solid rgb(197, 183, 242);

					&.blue {
						border-top: 30rpx solid rgb(113, 161, 255);
					}
				}
			}
		}

		.tabmain {
			margin: 50rpx 0;

			.productbox {
				box-sizing: border-box;
				border: 1px solid rgb(190, 190, 190);
				border-radius: 12rpx;
				color: #A99CE6;
				padding: 20rpx 32rpx;
				margin-bottom: 20rpx;
				position: relative;

				.image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 24rpx;
				}

				.product-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;

					.titles {
						color: #8678CB;
						font-size: 28rpx;
						line-height: 4;
					}

					.taglist {
						display: flex;

						.tag {
							border-radius: 14rpx;
							background: rgb(247, 242, 255);
							padding: 6rpx 10rpx;
							color: #8978CB;
							font-size: 18rpx;
							margin-right: 10rpx;
						}
					}

					.tips {
						font-size: 22rpx;
						line-height: 2;
					}

					.distance {
						font-size: 24rpx;
						color: #A99CE6;

						.icon-location {
							width: 18rpx;
							height: 21rpx;
							margin-right: 5rpx;
						}
					}
				}

				.product-value {
					font-size: 24rpx;
					position: absolute;
					right: 32rpx;
					bottom: 20rpx;

					>view {
						margin-bottom: 20rpx;

						text {
							color: #E36060;
							font-size: 32rpx;
							padding: 0 5rpx;
						}
					}
				}
			}
		}
	}
</style>
